<template src="./data.html">
</template>
<script setup>
import data from '../data.js'
import { getFooterTop } from '../element'
import {
  onMounted, onUnmounted,
  ref, defineProps,
} from 'vue'

const props = defineProps(['count'])
const INCREMENT = props.count
const start = ref(0)
let end = ref(INCREMENT)
const itemRefs = ref([])

function scroll () {
  const list = itemRefs.value
  const lastItem = list[list.length - 1]
  if (lastItem.getBoundingClientRect().bottom <= getFooterTop()) {
    end.value += INCREMENT
  }
}

onMounted(() => document.addEventListener('scroll', scroll))
onUnmounted(() => document.removeEventListener('scroll', scroll))

function setItemRef (el, item) {
  itemRefs.value[data.indexOf(item)] = el
}
</script>
